<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">

    div {
        margin: 0 0 0.75em 0;
    }

    input[type="radio"] {
        display: none;
    }

    input[type="radio"] + label span {
        display: inline-block;
        width: 19px;
        height: 19px;
        margin: -1px 4px 0 0;
        vertical-align: middle;
        cursor: pointer;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }

    input[type="radio"] + label span {
        background-color: greenyellow;
    }

    input[type="radio"]:checked + label span {
        background-color: #CC3300;
    }

    input[type="radio"] + label span,
    input[type="radio"]:checked + label span {

    }

</style>
<body>
<ul>
    <li>
        <div>
            <input type="radio" id="radio01" name="radio"/>
            <label for="radio01"><span></span>Radio Button 1</label>
        </div>
    </li>
    <li>
        <div>
            <input type="radio" id="radio02" name="radio" disabled/>
            <label for="radio02"><span></span>Radio Button 2</label>
        </div>
    </li>
    <li>
        <div>
            <input type="radio" id="radio03" name="radio"/>
            <label for="radio03"><span></span>Radio Button 2</label>
        </div>
    </li>

</ul>




</body>
</html>